<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
  <style type="text/css">
  @import url("style-ie8.css");
  </style>
  <script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
    </script>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
    <div id="colorchanger">
    <a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
    <a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
    <a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
    <a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
    <a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
    <a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
    <a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
    <a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
    <a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
    <a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
    <h4>Theme Color Selector</h4>
    </div>
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo" /><span id="sitename">Matrix</span></a>
<!-- END LOGO -->

<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
	<li><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
    <li>
    	<a href="#" title="Portfolio"><span>Portfolio</span></a>
        <ul>
        	<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
            <li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
            <li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
            <li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
            <li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
        </ul>
    </li>
<!-- Menu Item 3 -->
    <li><a href="#" title="Blog"><span>Blog</span></a>
    	<ul>
        	<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
            <li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
        	<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
        	<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
        </ul>
    </li>
<!-- Menu Item 4 -->
    <li class="current">
    	<a href="#" title="Features"><span>Features</span></a>
        <ul>
        	<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
            <li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
            <li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
        </ul>
    </li>
<!-- Menu Item 5 -->
    <li><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
    <li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->

<!-- BEGIN CONTENT -->
<section id="content" class="clearfix">
<!-- Title --><div id="content-title">Features</div>

<!-- BEGIN PAGE -->
<section id="page">

<!-- BEGIN PAGE CONTENT -->
<div id="pg-content" class="clearfix">

<div class="one-half"><h3>One Half</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis.</p></div>
<div class="one-half last"><h3>One Half</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<hr class="break" />

<div class="one-third"><h3>One Third</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<div class="one-third"><h3>One Third</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<div class="one-third last"><h3>One Third</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<hr class="break" />

<div class="one-third"><h3>One Third</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<div class="two-thirds last"><h3>Two Thirds</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<hr class="break" />

<div class="one-fourth"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<div class="one-fourth"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<div class="one-fourth"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<div class="one-fourth last"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<hr class="break" />

<div class="one-fourth"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<div class="three-fourths last"><h3>Three Fourths</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis.  Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<hr class="break" />

<div class="one-fourth"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>
<div class="one-half"><h3>One Half</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien. Nunc metus nulla, commodo ut rutrum at, commodo vel dui. Phasellus tincidunt aliquam quam at vulputate. Nullam ac ligula metus, vel viverra sem. Duis. </p></div>
<div class="one-fourth last"><h3>One Fourth</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam ante et massa dignissim blandit. Integer a varius lorem. Donec eu libero turpis, quis tristique sapien.</p></div>

</div><!-- end #pg-content -->
<!-- END PAGE CONTENT -->
</section>
<!-- END PAGE -->
</section>
<!-- END CONTENT -->

<!-- BEGIN FOOTER -->
<footer class="clearfix">

<div id="footer-social">
<a href="#"><span class="behance-mini"></span></a>
<a href="#"><span class="twitter-mini"></span></a>
<a href="#"><span class="facebook-mini"></span></a>
<a href="#"><span class="linkedin-mini"></span></a>
<a href="#"><span class="pinterest-mini"></span></a>
<a href="#"><span class="dribbble-mini"></span></a>
</div><!-- end #footer-social -->

<small>&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>
</footer>
<!-- END FOOTER -->

</section><!-- end #container -->
</div>

</body>
</html>
